<template>
  <div>
    <div class="header">
      <div> 市级抽样核查任务（区县） </div>
    </div>
    <a-table
      :dataSource="tableData"
      :columns="tableColumns"
      :pagination="false"
      bordered
      :loading="loading"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <span>
            <a>
              <Tooltip placement="top">
                <template #title>
                  <span>导出</span>
                </template>
                <ImportOutlined @click="importFn(record)" />
              </Tooltip>
            </a>
          </span>
        </template>
        <template v-if="column.key === 'sample_type'">
          <span>
            <span>
              <a-tag
                :color="
                  record.sample_type === 2
                    ? 'volcano'
                    : record.sample_type === 1
                    ? 'geekblue'
                    : record.sample_type === 0
                    ? 'blue'
                    : 'green'
                "
              >
                {{ record.sample_type_text }}
              </a-tag>
            </span>
          </span>
        </template>
      </template>
    </a-table>
  </div>
</template>
<script lang="ts" setup>
  import { reactive, toRefs, onMounted } from 'vue';
  import { Tooltip } from 'ant-design-vue';
  import { ImportOutlined } from '@ant-design/icons-vue';
  // import ImportSetting from './ImportSetting.vue';
  import { getInspectWorkPostList, getInspectWorkPostExcelList } from '/@/api/demo/system';
  import { iTableData, iTableColumns, iExcelTableData } from './types/table';
  import { useUserStore } from '/@/store/modules/user';
  import { iParams } from './types/params';
  // 转义地区编码
  import { selectClassFlyDict } from '/@/dict/bj_dict';
  import * as XLSX from 'xlsx';
  let data = reactive<{
    tableData: iTableData[];
    tableColumns: iTableColumns[];
    excelTableData: iExcelTableData[];
    exceltableColumns: iTableColumns[];
    id: number;
    loading: Boolean;
  }>({
    // 表格数据
    tableData: [],
    tableColumns: [
      {
        title: '序号',
        dataIndex: 'index',
        key: 'index',
        align: 'center',
        width: 100,
      },
      {
        title: '任务包名称',
        dataIndex: 'name',
        key: 'name',
        align: 'center',
      },
      {
        title: '抽样条数',
        dataIndex: 'sample_count',
        key: 'sample_count',
        align: 'center',
      },
      // {
      //   title: '初判结果',
      //   dataIndex: 'sample_type_text',
      //   key: 'sample_type_text',
      //   align: 'center',
      // },
      {
        title: '初判结果',
        dataIndex: 'sample_type',
        key: 'sample_type',
        align: 'center',
      },
      {
        title: '抽样区域',
        dataIndex: 'sample_area',
        key: 'sample_area',
        align: 'center',
      },
      {
        title: '抽样时间',
        dataIndex: 'create_on',
        key: 'create_on',
        align: 'center',
      },
      {
        title: '核查正确数',
        dataIndex: 'hc_zq',
        key: 'hc_zq',
        align: 'center',
      },
      {
        title: '正确率',
        dataIndex: 'hc_acuracy',
        key: 'hc_acuracy',
        align: 'center',
      },
      {
        title: '导出',
        key: 'action',
        align: 'center',
      },
    ],
    excelTableData: [],
    exceltableColumns: [
      {
        title: 'ID',
        dataIndex: 'id',
        key: 'id',
        align: 'center',
        width: 100,
      },
      {
        title: '编号',
        dataIndex: 'bh',
        key: 'bh',
        align: 'center',
        width: 100,
      },
      {
        title: '自建房安全排查编号',
        dataIndex: 'yhfwbh',
        key: 'yhfwbh',
        align: 'center',
      },
      {
        title: '普查房屋编号',
        dataIndex: 'fwbh',
        key: 'fwbh',
        align: 'center',
      },
      {
        title: '房屋地址',
        dataIndex: 'address',
        key: 'address',
        align: 'center',
      },
      {
        title: '区县编码',
        dataIndex: 'xzqdm',
        key: 'xzqdm',
        align: 'center',
      },
      {
        title: '区县名称',
        dataIndex: 'xzqdm_text',
        key: 'xzqdm_text',
        align: 'center',
      },
      {
        title: '街道编码',
        dataIndex: 'town',
        key: 'town',
        align: 'center',
      },
      {
        title: '街道名称',
        dataIndex: 'town_text',
        key: 'town_text',
        align: 'center',
      },
      {
        title: '村（社区）编码',
        dataIndex: 'village',
        key: 'village',
        align: 'center',
      },
      {
        title: '组',
        dataIndex: 'zu_qg',
        key: 'zu_qg',
        align: 'center',
      },
      {
        title: '路（街、巷）',
        dataIndex: 'lu_qg',
        key: 'lu_qg',
        align: 'center',
      },
      {
        title: '号',
        dataIndex: 'hao_qg',
        key: 'hao_qg',
        align: 'center',
      },
      {
        title: '建筑地址',
        dataIndex: 'address',
        key: 'address',
        align: 'center',
      },
      {
        title: '户主姓名',
        dataIndex: 'hzxm',
        key: 'hzxm',
        align: 'center',
      },
      {
        title: '初步判定',
        dataIndex: 'aqyhcp_text',
        key: 'aqyhcp_text',
        align: 'center',
      },
      {
        title: '区县核查结果',
        dataIndex: 'result_text',
        key: 'result_text',
        align: 'center',
      },
      {
        title: '市级核查结果',
        dataIndex: 'city_result_text',
        key: 'city_result_text',
        align: 'center',
      },
    ],
    id: null,
    loading: true,
  });
  let { tableData, tableColumns, loading, excelTableData, exceltableColumns } = toRefs(data);
  function getAreaToken() {
    const { getUserInfo } = useUserStore();
    data.id = getUserInfo.district.id;
  }
  async function getData() {
    // 北京市 下面 区县的 数据
    let params: iParams = {
      // id: `zj_tj_citycx`,
      id: `zj_tj_citycx2`,
      xzqdm: `${data.id}`,
    };
    // console.log('@params==', params);
    // 北京市  区县的接口
    let res: any = await getInspectWorkPostList(params);
    // console.log('@res===999===任务包', res);
    if (res || res.length > 0) {
      data.loading = false;
      res.forEach((item: any, index: number) => {
        item.index = index + 1;
        // 处理 抽样区域
        let area = JSON.parse(item.sample_area_code);
        if (area !== null) {
          item.sample_area = area[0].RegionName;
        }
        // 处理初判结果
        if (item.sample_type === 2) {
          item.sample_type_text = '严重安全隐患';
        } else if (item.sample_type === 1) {
          item.sample_type_text = '一般隐患';
        } else if (item.sample_type === 0) {
          item.sample_type_text = '无隐患';
        } else {
          item.sample_type_text = '全部';
        }
        // 处理 正确率
        if (item.hc_acuracy === null) {
          item.hc_accuracy = '';
        } else {
          item.hc_acuracy = `${item.hc_acuracy}%`;
        }
      });
      data.tableData = [...res];
    }
  }
  // 导出
  async function importFn(record) {
    // console.log('导出', record.id);
    let params: iParams = {
      id: `zj_tj_citycx_mx`,
      taskid: `${record.id}`,
    };
    let res: any = await getInspectWorkPostExcelList(params);
    // console.log('@res-导出', res.slice(0, 3));
    // let req = res.slice(0, 3);
    res.map((item: any) => {
      // 处理 区县编码
      item.xzqdm_text = selectClassFlyDict(item.xzqdm);

      // 处理 街道编码
      item.town_text = selectClassFlyDict(item.town);

      // 处理 初判结果
      if (item.aqyhcp === '1') {
        item.aqyhcp_text = '存在严重安全隐患';
      } else if (item.aqyhcp === '3') {
        item.aqyhcp_text = '存在一般安全隐患';
      } else if (item.aqyhcp === '2') {
        item.aqyhcp_text = '未发现安全隐患';
      }

      // 处理 区县核查结果
      if (item.result === 0) {
        item.result_text = '不正确';
      } else if (item.result === 1) {
        item.result_text = '正确';
      } else if (item.result === null) {
        item.result_text = '';
      }

      // 处理 市级核查结果(中文)
      if (item.city_result === null) {
        item.city_result_text = '未核查';
      } else if (item.city_result === 0) {
        item.city_result_text = '不正确';
      } else if (item.city_result === 1) {
        item.city_result_text = '正确';
      }
    });
    data.excelTableData = [...res];
    // 导出表格
    if (data.excelTableData) {
      exportTable(exceltableColumns.value, excelTableData.value);
    }
  }
  function exportTable(Columns, TableData) {
    let content: any[] = TableData; //拿到后端返回的数据
    let Header: any[] = Columns;
    createTable(Header, content); //调用下面的方法来制作表格
  }
  // 创建表格
  function createTable(Header, content) {
    let table = document.createElement('table'); //创建table
    let thead = document.createElement('thead'); //thead
    let tbody = document.createElement('tbody'); //thead
    let tr = document.createElement('tr'); //创建tr
    table.appendChild(thead);
    table.appendChild(tbody);
    thead.appendChild(tr);
    // 创建表头
    Header.forEach((item: any) => {
      let th = document.createElement('th');
      th.innerHTML = item.title;
      tr.appendChild(th);
    });
    // 添加内容
    content.forEach((item: any) => {
      let tr = document.createElement('tr'); //创建tr
      tbody.appendChild(tr);
      Header.forEach((item2: any) => {
        let td = document.createElement('td');
        let itemString: any = Object.entries(item);
        for (let item3 of itemString) {
          if (item2.key === item3[0]) {
            td.innerHTML = item3[1];
          }
        }
        tr.appendChild(td);
      });
    });
    //导出
    // 1.table 转 sheet 页
    let worksheet: any[] = XLSX.utils.table_to_sheet(table);
    // console.log('@worksheet', worksheet);

    // 2.新建工作簿
    let workbook: any[] = XLSX.utils.book_new();
    // console.log('@workbook', workbook);
    // 将表格内容变成文本
    let xlsxParam = { raw: true }; // 将表格数据设置为文本格式
    workbook = XLSX.utils.table_to_book(table, xlsxParam);

    // 3.设置列宽
    let wscols: any[] = [
      { wch: 15 },
      { wch: 15 },
      { wch: 15 },
      { wch: 15 },
      { wch: 50 },
      { wch: 15 },
      { wch: 15 },
      { wch: 15 },
      { wch: 15 },
      { wch: 15 },
      { wch: 15 },
      { wch: 15 },
      { wch: 15 },
    ];
    // workbook.SheetNames[0]获取到到是文件里的到第一个表格
    worksheet['!cols'] = wscols;
    let wsrows: any[] = [{ hpx: 20 }]; // 每行固定高度px
    for (let i = 0; i <= 5; i++) {
      wsrows.push({ hpx: 20 });
    }
    worksheet['!rows'] = wsrows;
    // let xlsxParam = { raw: true }; // 将表格数据设置为文本格式
    // 4.工作簿 调用 table_to_book() 方法   把表格 和 xlsx 的参数传进去
    // workbook = XLSX.utils.table_to_book(table, xlsxParam);
    XLSX.utils.book_append_sheet(workbook, worksheet, 'sheet');
    try {
      // 5.输出表格
      XLSX.writeFile(workbook, `自建房核查统计表.xlsx`);
    } catch (e) {
      console.log(e, workbook);
    }
  }
  onMounted(() => {
    getAreaToken();
    getData();
  });
</script>

<style lang="less">
  .header {
    width: 100%;
    height: 30px;
    display: flex;
    justify-content: space-between;
    .table-settings {
      & > * {
        margin-right: 12px;
      }

      svg {
        width: 1.3em;
        height: 1.3em;
      }
    }
  }
</style>
